<!-- 底部导航栏 -->
<template>
  <div class="btmNav">
    <div class="nav-list">
      <router-link tag="div" exact to="/" class="list-item">
        <van-icon name="wap-home-o" />
        <span>首页</span>
      </router-link>
      <router-link tag="div" exact to="/sift" class="list-item">
        <van-icon name="apps-o" />
        <span>精选</span>
      </router-link>
      <router-link tag="div" exact to="/shoppingcar" class="list-item">
        <van-icon name="shopping-cart-o" />
        <span>购物车</span>
      </router-link>
      <router-link tag="div" exact to="/user" class="list-item">
        <van-icon name="contact" />
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.btmNav {
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 0.5px solid rgba($color: #a9a9a9, $alpha: 0.2);
  background-color: #fff;
  .nav-list {
    padding: 0.25rem 0;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .list-item {
      width: 25%;
      text-align: center;
      display: flex;
      flex-direction: column;
      font-size: 25px;
      color: #a9a9a9;
      span {
        margin-top: 0.125rem;
        font-size: 0.8125rem;
        font-weight: 200;
      }
    }
    .list-item.router-link-active {
      color: #03ac03;
    }
  }
}
</style>
